<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: aqua;
  }
</style>
<div class="box"></div>

<body>
  <script>
    // window.getComputedStyleWindow.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 
    let ele = document.querySelector(".box")
    let el = window.getComputedStyle(ele, null)["height"]

    function move(ele, arg, target) {
      return new Promise((resolve, reject) => {
        let start = parseInt(window.getComputedStyle(ele, null)[arg])
        let dis = (target - start) / Math.abs(target - start)
        let speed = dis * 5;

        function fn() {
          let now = parseInt(window.getComputedStyle(ele, null)[arg])
          if (now == target) {
            // cb && cb("运动完成")
            resolve("运动完成")
          } else {
            ele.style[arg] = now + speed + 'px'
            setTimeout(fn, 50)
          }
        }
        fn();
      })
    }

    async function fn() {
      await move(ele, "left", 200);
      await move(ele, "top", 200);
      await move(ele, "left", 0);
      await move(ele, "top", 0);
    }
    fn();
  </script>
</body>

</html>